<template>
    <div class="container">
        <div id="map" style="height:500px;width:500px"></div>
    </div>
</template>

<script>
require("echarts/extension/bmap/bmap")
export default {
    data (){
        return {
            datas : [
                [114.31808,30.642429],
                [114.33964,30.652309],
                [114.359331,30.660822],
                [114.364289,30.617943],
                [114.394329,30.637458],
                [114.412079,30.643175],
                [114.428895,30.652185],
                [114.401659,30.702191],
                [114.390017,30.687285]
            ],
        }
    },
    methods: {
        initEchartsOrbMap(){
            var map = new BMap.Map("map"); // 创建Map实例
            map.centerAndZoom(new BMap.Point(114.387825,30.666724), 12); // 初始化地图,设置中心点坐标和地图级别
            map.setCurrentCity("武汉"); // 设置地图显示的城市 此项是必须设置的
            for(let i = 0;i<this.datas.length;i++){
                var mkr = new BMap.Marker(new BMap.Point(this.datas[i][0],this.datas[i][1]))
                map.addOverlay(mkr);
                var opts = {
                    width: 250,     // 信息窗口宽度
                    height: 100,    // 信息窗口高度
                    title: "Hello"  // 信息窗口标题
                }
            }
                
        }
    },
    mounted(){
        this.initEchartsOrbMap();
    },
}
</script>

<style scoped>
.container{
    height: 100%;
    width: 100%;
}
</style>